<template>
  <div class="ryxx">
    <!-- 第一行 -->
    <el-row>
      <el-col class="header_col">
        <div class="header_title">人员信息</div>
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <el-row>
      <el-col class="header_col">
        <el-button class="addPeople_btn" type="button" round @click="go"
          >添加人员</el-button
        >
        <el-button type="primary" round class="addPeople_btn1" @click="cz"
          >人员抽组</el-button
        >
      </el-col>
      <!-- @click="addInformation = true" -->
    </el-row>
    <!-- 第三行 -->
    <el-row>
      <el-col>
        <div class="content_search">
          <el-form ref="form" :model="searchData" label-width="80px">
            <el-form-item label="姓名">
              <el-input
                v-model="searchData.name"
                placeholder="请输入姓名"
                clearable
                size="small"
              ></el-input>
            </el-form-item>
            <el-form-item label="部门" size="small">
              <el-select v-model="searchData.bumen" clearable>
                <el-option
                  :key="v.pdeptId"
                  v-for="v in pdeptList"
                  :label="v.pdept"
                  :value="v.pdeptId"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="工种" size="small">
              <el-select v-model="searchData.gongz" clearable>
                <el-option
                  :key="v.pjobId"
                  v-for="v in pjobList"
                  :label="v.pjob"
                  :value="v.pjobId"
                ></el-option>
              </el-select>
            </el-form-item>

            <!-- 按钮组 -->
            <div class="btn_type">
              <el-button type="primary" icon="el-icon-search" @click="onSearch"
                >查询</el-button
              >
              <el-button
                type="info"
                icon="el-icon-refresh-right"
                @click="onReset"
                >重置</el-button
              >
            </div>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <!-- 表格数据 -->
    <div class="table_infor">
      <el-table :data="tableData" style="width: 100%" row-key="id">
        <el-table-column prop="pname" label="姓名" width="180" align="center">
        </el-table-column>
        <el-table-column prop="personalDept.pdept" label="部门" align="center">
        </el-table-column>
        <el-table-column prop="personalJob.pjob" label="工种" align="center">
        </el-table-column>
        <el-table-column
          prop="personalClass.pclass"
          label="等级"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="openEdit(scope.row)"
              ><i class="el-icon-edit-outline" style="font-size: 15px"></i
            ></el-button>
            <el-button type="danger" plain size="mini" @click="openDel(scope.row.id)"
              ><i class="el-icon-delete" style="font-size: 15px"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页码 -->
    <div class="pagination">
      <div style="display: flex; align-items: center">
        <span style="font-size: 13px; font-weight: bold"
          >共{{ Math.ceil(total / limit) }}页/{{ total }}条数据</span
        >
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="limit"
            layout="prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 删除 -->
    <el-dialog title="删除确认" :visible.sync="delDialog" class="bjk">
      <el-form> 删除该条客户信息后将不可恢复，确认删除？ </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="delDialog = false">取 消</el-button>
        <el-button type="primary" @click="del">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑人员信息" :visible.sync="editDialog">
      <el-form :model="editData">
        <el-form-item label="姓名" label-width="300px">
          <el-input
            v-model="editData.pname"
            autocomplete="off"
            class="inpName"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门" size="small">
          <el-select v-model="editData.pdeptId" clearable>
            <el-option
              :key="v.pdeptId"
              v-for="v in pdeptList"
              :label="v.pdept"
              :value="v.pdeptId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="工种" size="small">
          <el-select v-model="editData.pjobId" clearable>
            <el-option
              :key="v.pjobId"
              v-for="v in pjobList"
              :label="v.pjob"
              :value="v.pjobId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工种等级" size="small">
          <el-select v-model="editData.pclassId" clearable>
            <el-option
              :key="v.pclassId"
              v-for="v in pclassList"
              :label="v.pclass"
              :value="v.pclassId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      searchData: {
        name: null,
        bumen: null,
        gongz: null,
        dengji: null,
      },
      delId:null,
      tableData: [
        // {
        //   id:null,
        //   pname:'',
        //   pdept:'',
        //   pjob:'',
        //   pclass:''
        // }
      ],
      pdeptList: [],
      pjobList: [],
      pclassList: [],
      editData: {
        pdeptId: null,
        pjobId: null,
        pclassId: null,
        pname: null,
        id:null,
      },
      editDialog: false,
      delDialog: false,
      page: 1,
      limit: 5,
      total: 0,
    };
  },
  methods: {
    getData: function () {
      this.$axios({
        url: "/personal/list",
        method: "post",
        data: {
          limit: this.limit,
          page: this.page,
          pdeptId: this.searchData.bumen == "" ? null : this.searchData.bumen,
          pjobId: this.searchData.gongz == "" ? null : this.searchData.gongz,
          pname: this.searchData.name == "" ? null : this.searchData.name,
        },
      }).then(({ data }) => {
        console.log(data);
        this.tableData = data.data;
        this.total = data.total;
      });
    },
    pdept_type: function () {
      this.$axios({
        url: "/personal/pdept",
        method: "get",
      }).then(({ data }) => {
        this.pdeptList = data.data;
      });
    },
    job_type: function () {
      this.$axios({
        url: "/personal/pjob",
        method: "get",
      }).then(({ data }) => {
        // console.log(data)
        this.pjobList = data.data;
      });
    },
    class_type: function () {
      this.$axios({
        url: "/personal/pclass",
        method: "get",
      }).then(({ data }) => {
        // console.log(data)
        this.pclassList = data.data;
      });
    },
    go: function () {
      this.$router.push("/home/Tjry");
    },
    cz: function () {
      this.$router.push("/home/Rycz");
    },
    openDel: function (row) {
      this.delDialog=true;
      console.log(row);
      this.delId=row
    },
    openEdit: function (row) {
      this.editDialog = true;
      this.editData.pname = row.pname;
      this.editData.pdeptId = row.personalDept.pdeptId;
      this.editData.pjobId = row.personalJob.pjobId;
      this.editData.pclassId = row.personalClass.pclassId;
      this.editData.id = row.id;
    },
    edit: function () {
      // console.log(this.editData.pjobId);
      this.$axios({
        url: "/personal/update",
        method: "post",
        data: {
          pname: this.editData.pname,
          personalDept:{pdeptId: this.editData.pdeptId},
          personalClass:{pclassId: this.editData.pclassId},
          personalJob:{pjobId: this.editData.pjobId},
          id: this.editData.id,
        },
      }).then(({data}) => {
         if(data.msg=='一切ok'){
          this.$message.success('编辑成功')
          this.editDialog=false;
          this.getData();
        }else{
          this.$message.error('编辑失败')
        }
      });
    },
    del: function () {
      this.$axios({
        url:'/personal/delete',
        method:'get',
        params:{
          id:this.delId,
        }
      }).then(({data})=>{
        console.log(data)
         if(data.msg=='一切ok'){
          this.$message.success('删除成功')
          this.getData();
          this.delDialog=false;
        }else{
          this.$message.error('删除失败')
        }
      })
    },
    onSearch: function () {
      this.getData();
    },
    onReset: function () {
      this.searchData.bumen = "";
      this.searchData.name = "";
      this.searchData.gongz = "";
      this.getData();
    },
    //分页
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
  },
  mounted: function () {
    this.getData();
    this.pdept_type();
    this.job_type();
    this.class_type();
  },
};
</script>
<style lang="less" scoped>
.ryxx {
  width: 100%;
  height: 100%;

  .header_col {
    margin-top: 20px;
    padding-left: 30px;
    min-width: 1440px;
  }

  .header_title {
    height: 40px;
    width: 100%;
    font-size: 24px;
    line-height: 40px;
    color: #344563;
    font-weight: bolder;
  }
  .addPeople_btn,
  .addPeople_btn1 {
    width: 110px;
    height: 40px;
    background-color: #4985fb;
    color: #fff;
  }
  .addPeople_btn1 {
    background: #64c8bc;
  }

  .content_search {
    width: 100%;
    margin-top: 20px;
    height: 60px;
    width: calc(100% - 30px);
    background: #ffffff;
    // background: yellow;
    font-size: 16px;
    line-height: 60px;
    color: #344563;
    font-weight: bolder;
    .el-form {
      height: 50px;
      line-height: 50px;
    }
    .el-form-item {
      width: 300px;
      height: 40px;
      display: inline-block;
    }
    // 输入框
    .el-input {
      width: 200px;
    }

    .btn_type {
      width: 340px;
      height: 41px;
      line-height: 41px;
      display: inline-block;
    }

    .el-button {
      padding: 0;
      text-align: center;
      width: 80px;
      height: 40px;
      line-height: 40px;
      margin-left: 30px;
    }
    .el-icon-search {
      font-size: 28px;
    }
    .search_btn {
      background: #64c8bc;
      border: 1px solid #64c8bc;
    }
    .el-icon-refresh-right {
      font-size: 28px;
    }
    .bjk {
      width: 800px;
      height: 350px;
      position: absolute;
      left: calc(50% - 200px);
    }
  }
}
.inpName {
  width: 150px;
}
.pagination {
  display: flex;
  margin-top: 50px;
  justify-content: right;
  margin-right: 20px;
}
</style>